<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="top">
        <div>
          <el-form ref="searchParams" :model="searchParams" :inline="true">
            <el-form-item label="考核名称" prop="name">
              <el-input v-model="searchParams.name" maxlength='100' placeholder="请输入考核名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="handleSearch" type="primary" icon="el-icon-search" style="margin-left:40px">搜索</el-button>
              <!-- <el-button @click="resetQuery" type="primary" icon="el-icon-search" style="margin-left:40px">重置</el-button> -->
              <!-- <el-button @click="handleCreate" type="primary" icon="el-icon-plus" style="margin-left:40px">新增</el-button> -->
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-table :data="examineList" size='medium' border>
            <el-table-column prop="id" label="id" width="50"></el-table-column>
            <el-table-column prop="name" label="考核名称" show-overflow-tooltip>
              <template slot-scope="scope">
                <jc-button :title="scope.row.name" @click="handleUpdate(scope.$index, scope.row)"></jc-button>
              </template>
            </el-table-column>
            <el-table-column prop="grade" label="级别" show-overflow-tooltip></el-table-column>
            <el-table-column prop="verticalNumber" label="直推单数" show-overflow-tooltip></el-table-column>
            <el-table-column prop="teamNumber" label="团队单数" show-overflow-tooltip></el-table-column>
            <el-table-column prop="preAward" label="每单奖励" show-overflow-tooltip></el-table-column>
            <el-table-column prop="types" label="启用状态" show-overflow-tooltip v-if="userModel.role=='admin'">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#999999"
                  @change="statusChange(scope.row)">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="rankName" label="归属活动" show-overflow-tooltip>
              <template slot-scope="scope">
                <div>{{scope.row.activityModel.name}}</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <!-- 修改对话框 -->
    <el-dialog :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" :inline="true">
        <el-form-item label="考核名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="直推单数" prop="verticalNumber">
          <el-input v-model="form.verticalNumber" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="团队单数" prop="teamNumber">
          <el-input v-model="form.teamNumber" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="每单奖励" prop="preAward">
          <el-input v-model="form.preAward" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-col style="margin: 20px 0;">
      <pagination
        style="background: #ffffff; height: 50px"
        v-show="totalSize > 0"
        :total="totalSize"
        :page.sync="page"
        :limit.sync="size"
        @pagination="findExamineList"
      />
    </el-col>
  </div>
</template>

<script>
import {
  findExamineList, updateExamine
} from '@/api/system/examine.js'

export default {
  components: {},
  data() {
    return {
      page: 1,
      size: 20,
      totalSize: 0,
      userModel: {},
      examineList: null,
      searchParams: {
        name: '',
        key: '',
        status: ''
      },
      open: false,
      form: {},
      rules: {
        appname: [{ required: true, message: "请输入", trigger: "blur" }],
        currentVersion: [{ required: true, message: "请输入", trigger: "blur" }],
        checking: [{ required: true, message: "请输入", trigger: "blur" }],
        mch_id: [{ required: true, message: "请输入", trigger: "blur" }],
        mch_key: [{ required: true, message: "请输入", trigger: "blur" }],
        appid: [{ required: true, message: "请输入", trigger: "blur" }],
        appsecret: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      statusOptions: [
        {key: 0, name: "停用"},
        {key: 1, name: "正常"},
      ]
    }
  },
  created(){
    this.userModel = this.$store.state.user.userModel
    this.findExamineList()
  },
  methods:{
    cancel(){
      this.open = false
    },
    // 增
    handleCreate(){
      this.open = true
    },
    // 删
    handleDelete(index, row){
      this.$confirm('是否确认删除考核"' + row.name + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function(){
        return deleteExamine({examineId: row.id})
      }).then(() => {
        this.findExamineList()
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      }).catch(function() {});
    },
    // 改
    handleUpdate(index, row){
      this.open = true
      this.form = row
    },
    handleSearch(){
      this.page = 1
      this.findExamineList()
    },
    resetQuery() {
      this.resetForm('searchParams')
      this.handleSearch()
    },
    statusChange(row){
      updateExamine({
        examineId: row.id,
        status: row.status
      }).then(res=>{
        if(res.data.code==10000){
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        }
      })
    },
    findExamineList() {
      this.searchParams.page = this.page
      this.searchParams.size = this.size
      findExamineList(this.searchParams).then(res => {
          if(res.data.code == 10000){
            this.totalSize = res.data.data.total_count
            this.examineList = res.data.data.list
            this.examineList.forEach(elem=>{
              elem.createTimeFormat = this.time.dateFormat('YY-mm-dd HH:MM:SS', elem.createTime)
              elem.statusLabel = elem.status == 1 ? "正常": "停用"

            })
          }
      });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if(this.form.id){
            this.form.examineId = this.form.id
            updateExamine(this.form).then(res=>{
              if(res.data.code == 10000){
                this.$message({
                  type: 'success',
                  message: '更新成功'
                })
                this.open = false
                this.findExamineList()
              }
            })
          }else{
            
          }
        }
      })
    }
  },
}
</script>


<style lang="scss" scoped>

</style>
